import {Button, Input, message, Modal} from "antd";
import httpRequestUtils from "../../utils/HttpRequestUtils";
import gengzpMqApis from "../../apis/apis";

const TopicEdit = (props) => {

    const [messageApi, contextHolder] = message.useMessage();

    /**
     * 编辑topic信息
     */
    const editTopic = () => {
        httpRequestUtils.post(gengzpMqApis.editTopic, {
            id: props.currentTopicInfo.id,
            description: props.currentTopicInfo.topicDescription
        }).then(res => {
            if (res.code === 200) {
                // 刷新列表
                props.pageQueryTopic();
                props.closeTopicEditModal();
                messageApi.success('操作成功');
            }else{
                messageApi.error('操作失败' + res);
            }
        });
    }

    return (
        <Modal
            title={"编辑Topic信息"}
            open={props.topicEditModalVisible}
            onCancel={props.closeTopicEditModal}
            footer={<div>
                <Button
                    danger={true}
                    onClick={props.closeTopicEditModal}
                >
                    取消
                </Button>
                <Button
                    type={'primary'}
                    style={{marginLeft: '10px'}}
                    onClick={() => editTopic()}
                >
                    确认修改
                </Button>
            </div>}
        >
            <div style={{width: '100%', paddingTop: '20px', paddingBottom: '10px'}}>

                {contextHolder}

                <div style={{display: 'flex', justifyContent: 'center'}}>
                    <div style={{display: 'flex', alignItems: 'center'}}>
                        <div style={{display: 'flex', marginLeft: 'auto'}}>topic名称：</div>
                    </div>
                    <div style={{display: 'flex'}}>
                        <Input
                            disabled={true}
                            placeholder="请输入主题名"
                            value={props.currentTopicInfo.topicName}
                            onChange={(e) => props.setCurrentTopicInfo(
                                {
                                    ...props.currentTopicInfo,
                                    topicName: e.target.value
                                }
                            )}
                        />
                    </div>
                </div>

                <div style={{display: 'flex', justifyContent: 'center', marginTop: '5px'}}>
                    <div style={{display: 'flex', alignItems: 'center'}}>
                        <div style={{display: 'flex', marginLeft: 'auto'}}>topic描述：</div>
                    </div>
                    <div style={{display: 'flex'}}>
                        <Input
                            placeholder="请输入主题描述"
                            value={props.currentTopicInfo.topicDescription}
                            onChange={(e) => props.setCurrentTopicInfo(
                                {
                                    ...props.currentTopicInfo,
                                    topicDescription: e.target.value
                                }
                            )}
                        />
                    </div>
                </div>
            </div>
        </Modal>
    );
};

export default TopicEdit;